<template>
  <div>
    <!-- 表格 -->
    <div class="table">
      <OrderTable
        id="id"
        ref="myTableRef"
        :is-mar-class="true"
        :is-selection="isSelection"
        :table-data="tableData"
        :services-columns="servicesColumns"
        :services-select="servicesSelect"
        :columns="columns"
        :is-show-fixed="isShowFixed"
        v-bind="$attrs"
        :url-data="urlData"
        @inputChange="inputChange"
        @rowClick="rowClick"
        @selectInfo="selectInfo"
        @handleSelection="handleSelection"
        @isClose="isClose"
      />
    </div>
    <!-- 按钮 workItemId存在才能显示 否则就是综合查询进来的-->
    <div v-if="urlData.workItemId" class="btn-config">
      <!-- 节点 sett_01 是物资 -->
      <template v-if="currentNode === 'sett_01' && activeName === '物资明细信息'">
        <BtnConfig :btn-configs="btnOption['A']" @propClick="handleClick" />
      </template>
      <!-- 节点 sett_01 是服务 -->
      <template v-if="currentNode === 'sett_01' && activeName === '服务明细信息'">
        <el-button class="pms-button-primary" @click="handleClick('settleConfirm')">保存明细</el-button>
        <el-button
          v-if="Number(nodeObjData.yesConfirmCount) > 0"
          class="pms-button-primary"
          @click="handleClick('backTosupplier')"
        >退回供应商</el-button>
        <el-button
          v-if="(Number(nodeObjData.noSupplierFlowCount) > 0 && Number(nodeObjData.supplierAdjustCount) > 0)"
          class="pms-button-primary"
          @click="handleClick('pushSupplier')"
        >推送供应商</el-button>
        <el-tooltip v-if="(Number(nodeObjData.noSupplierFlowCount) > 0 && Number(nodeObjData.supplierAdjustCount) > 0)" class="item" effect="dark" placement="bottom">
          <div slot="content">①推送供应商成功后，由指派的服务商人员登录自己<br/>的账号到PMS系统-【我的工作】-【我的待办】菜单下，<br/>将【待办类型】选择为【其他】后进行结算调整和确认<br/>②待所有供应商均确认完成后，再进行下一步操作！</div>
          <span style="cursor: pointer;margin: 2px 0 0 2px;width: 15px;height: 15px;background: red;border-radius: 50%;display: flex;align-items: center;color: #fff;justify-content: center;">?</span>
        </el-tooltip>
      </template>
      <!-- 节点 sett_03 -->
      <template v-if="currentNode === 'sett_03'">
        <template
          v-if="Number(nodeObjData.equipCount) > 0 || Number(nodeObjData.servCount) > 0 || Number(nodeObjData.isPush) === 2"
        >
          <el-button class="pms-button-primary" @click="handleClick('pusherAnd')">推送商合</el-button>
          <el-button class="pms-button-primary" @click="handleClick('pusherAndSchedule')">推送商合进度</el-button>
        </template>
        <el-button
          v-if="(Number(nodeObjData.equipCount) === 0 && Number(nodeObjData.servCount) === 0 && Number(nodeObjData.isPush) !== 2)"
          class="pms-button-primary"
          @click="handleClick('balanceConfirm')"
        >结算确认</el-button>
      </template>
    </div>
    <!-- 物资绑定信息弹框 -->
    <div class="materia-dialog">
      <MateriaPop v-bind="$attrs" :url-data="urlData" @closeDialog="closeDialog" />
    </div>
  </div>
</template>

<script>
import OrderTable from '../components/OrderTable.vue'
import BtnConfig from '@/components/basic/btnConfig.vue'
import MateriaPop from '../materiapop/materiaPop.vue'
import { savebtnOptionA } from '../index.js'
export default {
  name: 'MaterialServiceDetails',
  components: {
    OrderTable,
    BtnConfig,
    MateriaPop
  },
  props: {
    // 表格数据
    tableData: {
      type: Array,
      default: () => []
    },
    // 表头数据
    columns: {
      type: Array,
      default: () => []
    },
    // 服务商表头
    servicesColumns: {
      type: Array,
      default: () => []
    },
    // 服务商下拉框字典数据
    servicesSelect: {
      type: Object,
      default: () => ({ })
    },
    isShowFixed: {
      type: Boolean,
      default: false
    },
    // 按钮不同类型 操作的方法
    saveMaterialdetails: {
      type: Function,
      require: true,
      default: null
    },
    // 是否展示多选框
    isSelection: {
      type: Boolean,
      default: false
    },
    // 是否展示多选框
    isShowBtn: {
      type: Boolean,
      default: true
    },
    // 浏览器地址数据
    urlData: {
      type: Object,
      default: () => ({ })
    }
  },
  data() {
    return {
      activeName: '', // 当前是那个服务商
      currentNode: '', // 当前是那个节点
      nodeObjData: {}, // 节点里面判断那个按钮显示
      btnType: '',
      btnOption: {
        'A': savebtnOptionA // type1 保存明细 是物资&&当前阶段是确认阶段
      }
    }
  },
  methods: {
    /**
     *
     * @param {*} row 结算确认
     * @param {*} fun
     */
    // 按钮事件
    handleClick(row) {
      this.saveMaterialdetails(row)
    },
    // 修改表格单元格数据回调
    inputChange(data) {
      this.$emit('tableInput', data)
    },
    // 关闭弹框
    closeDialog(show) {
      this.$emit('closeDialog', show)
    },
    // 给父组件传递修改服务商信息
    updateCheckPeople(row) {
      this.$emit('updateCheckPeople', row)
    },
    // 改变某一行的值需要暂存起来
    rowClick(data) {
      this.$emit('saveTempalte', data)
    },
    // 改变按钮
    changeBtnType(type, objData, tag) {
      this.currentNode = type
      this.activeName = tag
      this.nodeObjData = objData
    },
    // 触发下拉框事件
    selectInfo(row) {
      this.$emit('selectInfo', row)
    },
    // 勾选框
    handleSelection(rowList) {
      this.$emit('handleSelection', rowList)
    },
    // 状态开启下拉框需要多一条数据
    isClose(row) {
      this.$emit('isClose', row)
    },
    // 清空选中的多选框
    clearCheckBox() {
      this.$refs.myTableRef.clearSelection()
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-icon-arrow-right:before {
  content: "\e6e0" !important;
}

.btn-config {
  display: flex;
  justify-content: center;
  margin-top: 15px
}

.btn-config ::v-deep .btnBox {
  display: block;
}
</style>
